<template>
	<view class="subscribe">
		<view class="title">
			<span>请选择您感兴趣的栏目</span>
		</view>
		<view class="subWarp">
			<view @click="sellctSub(index)" :class="item.isSelect===true?'subItem active':'subItem'"  v-for="(item,index) in subData" :key="key">
				{{item.desc}}
			</view>
		</view>
		<view class="sub-sure" @click="toBack">
			<button>确定</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				subData:[],
				selectId:[],
			};
		},
		onLoad() {
			this.getActiveArea();
		},
		methods:{
			...mapMutations('userStore',['SetIsSubscribe']),
			//点击确定提交
			toBack(){
				if(!permissionJudge('user:subscribe:list')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				// uni.navigateBack();
				let arr = [];
				this.selectId.map((item,index)=>{
					arr.push({
						code:item
					})
				})
				this.$request.post({
					url:'userSubscribe/addBath',
					data:arr,
				}).then(res=>{
					console.log(res)
					this.SetIsSubscribe(true)
					uni.showToast({
						title:res,
						success:()=> {
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/recommend/recommend'
								})
							},500)
						}
					})
					
				})
			},
			//获取订阅数据
			getActiveArea(){
				this.$request.get({
					url:'dict/listUseArea'
				}).then(res=>{
					this.subData = res;
					this.$request.get({
						url:'userSubscribe/selectAll',
						force: false
					}).then(res=>{
						this.subData.map((item,index)=>{
							res.map((c,d)=>{
								if(parseFloat(c.code)===parseFloat(item.id)){
								   this.selectId.push(this.subData[index].id)
								   this.$set(this.subData[index],'isSelect',true)
								}
							})
						})
					})
				})
			},
			//选择tab
			sellctSub(index){
				if(this.subData[index].isSelect===true){
					this.$set(this.subData[index],'isSelect',false)
					var index = this.selectId.indexOf(this.subData[index].id);
					if (index > -1) { 
					this.selectId.splice(index, 1); 
					} 
				}else {
					if(this.selectId.length>=6){
						uni.showToast({
							title:'最多选择六个',
							icon:'none'
						})
						return false
					}
					this.$set(this.subData[index],'isSelect',true)
					this.selectId.push(this.subData[index].id)
				}	
			}
		}
	}
</script>

<style scoped lang="scss">
  .subscribe {
	  box-sizing: border-box;
	  border-top: 2upx solid #F5F5F5;
	  padding: 80upx 40upx 140upx 40upx;
	  .title {
		  line-height:48upx;
		  text-align: center;
		  span {
			  font-size:34upx;
			  font-family:PingFangSC-Semibold,PingFang SC;
			  font-weight:bold;
			  color:rgba(51,51,51,1);
			  position: relative;
			  z-index: 999;
			  &::after{
				  content: '';
				  display: block;
				  position: absolute;
				  left: 50%;
				  transform: translateX(-50%);
				  bottom: -4upx;
				  width:338upx;
				  height:20upx;
				  background:rgba(233,242,254,1);
				  z-index: -1;
			  }
		  }
	  }
	  .subWarp {
		  display: flex;
		  flex-wrap: wrap;
		  margin-top: 82upx;
		  .subItem {
			  height: 72upx;
			  background:rgba(255,255,255,1);
			  box-shadow:0upx 0upx 64upx 0px rgba(50,125,238,0.13);
			  border-radius:36upx;
			  margin-bottom: 38upx;
			  box-sizing: border-box;
			  padding: 0 24upx 0 28upx;
			  color: #444444;
			  line-height: 72upx;
			  margin-right: 24upx;
		  }
		  .active {
			  background:rgba(0,139,255,1);
			  color: #FFFFFF;
			  box-shadow:0px 4px 64px 0px rgba(0,139,255,0.26);
		  }
	  }
	  .sub-sure {
		  position: fixed;
		  bottom: 28upx;
		  left: 50%;
		  transform: translateX(-50%);
		  button {
			 width:684upx;
			 height:96upx;
			 background:rgba(0,139,255,1);
			 border-radius:6upx;
             font-size:32upx;
             font-family:PingFangSC-Regular,PingFang SC;
             font-weight:400;
             color:rgba(255,255,255,1);
			 line-height: 96upx;
			 text-align: center;
		  }
	  }
  }
</style>
